ext.define('extension.gui', function() {

var messages = extension.messages;
var utils = extension.utils;
var gui = extension.gui;

var Dialog = {
    open: function(title, config) {
        if (!this.isOpen())
            this.parent.appendChild(this.host);
        this.shadow.querySelector('.note').focus();
    },
    isOpen: function() {
        return this.parent.contains(this.host);
    },
    close: function() {
        if (this.isOpen())
            this.parent.removeChild(this.host);
    },
    selectColor: function(str) {
        var selected = this.shadow.querySelector('.color.selected');
        if (selected)
            selected.classList.remove('selected');
        this.shadow.querySelector('.color.' + str).classList.add('selected');
    },
    setPosition: function(obj) {
        var style = this.host.style;
        style.removeProperty('top');
        style.removeProperty('bottom');
        style.removeProperty('left');
        style.removeProperty('right');
        for (var k in obj)
            style[k] = obj[k];
    },
    setText: function(str) {
        this.shadow.querySelector('.note').value = str || '';
    },
    setTitle: function(str) {
        this.shadow.querySelector('.title').innerText = str || '';
    },
    getText: function() {
        return this.shadow.querySelector('.note').value.trim();
    },
    getSelectedColor: function() {
        var selected = this.shadow.querySelector('.color.selected');
        if (selected)
            return utils.extractColor(selected.className);
    },
    getSettings: function() {
        return {
            text: this.getText(),
            color: this.getSelectedColor()
        };
    },
    getInstance: function() {
        if (Dialog._instance == null)
            Dialog._instance = createDialogWidget();
        return Dialog._instance;
    },
    handleEvent: function(event) {
        var target = event.target;
        var classes = target.classList;

        if (event instanceof KeyboardEvent) {
            if (classes.contains('note')) {
                switch (event.keyCode) {
                    case 13:
                        if (event.ctrlKey)
                            this.shadow.querySelector('.save').click();
                        break;
                    case 27:
                        this.shadow.querySelector('.cancel').click();
                }
            }
        }

        if (event instanceof MouseEvent) {
            if (event.type === 'click') {
                if (classes.contains('highlight'))
                    messages.send('view-dialog-highlight');

                if (classes.contains('cancel'))
                    messages.send('view-dialog-cancel');

                if (classes.contains('save'))
                    messages.send('view-dialog-save');

                if (classes.contains('color')) {
                    var color = utils.extractColor(target.className);
                    this.selectColor(color);
                }
            }
        }
    }
};

function createDialogElement() {
    var host = document.createElement('div');
    host.style.cssText = 'position:fixed;bottom:0;right:0;z-index:2147483647';
    var title = document.createElement('div');
    title.className = 'title';
    var textnote = document.createElement('textarea');
    textnote.className = 'note';
    textnote.rows = 12;
    textnote.setAttribute('autofocus', '');
    var controls = document.createElement('div');
    controls.className = 'controls';
    var colorbox = document.createElement('div');
    colorbox.className = 'colorbox';
    var highlight = document.createElement('button');
    highlight.innerText = 'Highlight';
    highlight.className = 'highlight';
    var cancel = document.createElement('button');
    cancel.innerText = 'Cancel';
    cancel.className = 'cancel';
    var save = document.createElement('button');
    save.innerText = 'Save';
    save.className = 'save';
    var buttons = document.createElement('div');
    buttons.className = 'buttons';
    buttons.appendChild(highlight);
    var spacer = document.createElement('div');
    spacer.className = 'spacer';
    buttons.appendChild(spacer);
    buttons.appendChild(cancel);
    buttons.appendChild(save);
    for (var i = 0; i < utils.colors.length; i++) {
        var item = document.createElement('button');
        item.className = 'color ' + utils.colors[i];
        colorbox.appendChild(item);
    }
    controls.appendChild(colorbox);
    controls.appendChild(buttons);
    var style = document.createElement('style');
    style.innerText = utils.createShadowStyle('dialog.css');
    var container = document.createElement('div');
    container.className = 'dialog';
    container.appendChild(title);
    container.appendChild(textnote);
    container.appendChild(controls);
    var shadow = utils.getShadowRoot(host);
    shadow.appendChild(style);
    shadow.appendChild(container);
    return host;
}

function createDialogWidget() {
    var host = createDialogElement();
    var widget = utils.createWidget(Dialog, host, document.body);
    var shadow = widget.shadow;
    shadow.querySelector('.title').addEventListener('click', widget);
    shadow.querySelector('.controls').addEventListener('click', widget);
    shadow.querySelector('.note').addEventListener('keyup', widget);
    gui.attachAchorPoint(shadow.querySelector('.title'), host);
    return widget;
}

return {
    Dialog: Dialog
};

});
